<template>
  <view class="wrap">
    <view class="take">
      <view class="hd">
        <view class="left" v-if="detail.user">
          <view class="avatar">
            <image :src="setUrl(detail.user.avatar)" class="img"></image>
          </view>
          <view class="fo">
            <view class="name">{{ detail.user.nickname }}</view>
            <view class="time">{{ timeFormat(detail.createtime, 'yyyy-mm-dd hh:MM') }} IP属地：{{ detail.user.city ? detail.user.city : '未知' }}</view>
          </view>
        </view>
      </view>
      <view class="carry" v-if="detail.invite">
        <view class="title">向 {{ detail.invite.nickname }} 提问：</view>
      </view>
      <view class="content">
        <view class="content" v-if="detail">
          <uv-parse :content="detail.content"></uv-parse>
        </view>
      </view>
      <view class="picture" v-if="detail.images">
        <view class="environ" v-for="(item, idx) in detail.images.split(',')" :key="idx">
          <image :src="setUrl(item)" class="img" mode="center"></image>
        </view>
      </view>
    </view>
    <view class="foot" v-if="userInfo.user_id == detail.to_user_id && detail.is_solve == 0">
      <button class="btn" hover-class="none" @click="goAnswer">回答问题</button>
    </view>
    <view class="fix" v-if="detail.user && userInfo.user_id == detail.user.id">
      <view class="long" v-if="detail.is_solve != 1">
        <view class="btns wait">等待回答</view>
      </view>
      <view class="long" @click="deleteQuest">
        <view class="btns delete">删除该条提问</view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <uv-modal ref="modal" title="提示" showCancelButton confirmColor='#E43222' @confirm="confirm">
      <view style="text-align: center;">
        是否确认删除该条提问
      </view>
    </uv-modal>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { post } from '@/api';
import { useUser } from '@/store';
import { setUrl, toast } from '@/common';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

const modal = ref(null);

let id = '';
let detail = ref('');

let userInfo = computed(() => {
  const store = useUser();
  return uni.$uv.deepClone(store.userInfo);
});
onLoad((option) => {
  id = option.id;
  getData();
})

function getData(){
  post('api/association_question/getQuestionDetail', { question_id: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value = data;
    }
  })
}
function deleteQuest(){
  modal.value.open();
}
// 删除该提问
function confirm(){
  post('api/association_question/delAssociationQuestion', {question_id: id}).then(res => {
    if(res.code == 1){
      toast('操作成功');
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000)
    }
  })
}
function goAnswer(){
  uni.navigateTo({
    url: `/pages/mine/message/issue?question_id=${detail.value.id}&association_id=${detail.value.association_id}`
  });
}
</script>

<style lang="scss" scoped>
  .foot{
    padding: 0 30rpx;
  }
  .fix{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20rpx 0;
    border-top: 1px solid #EFEFEF;
    .long{
      padding: 20rpx 0;
      .btns{
        font-weight: 400;
        font-size: 32rpx;
        text-align: center;
        &.wait{
          color: #999999;
        }
        &.delete{
          color: #E43222;
        }
      }
    }
  }
  .take{
    padding: 0 30rpx;
    padding-top: 40rpx;
    padding-bottom: 30rpx;
    border-top: 0;
    .picture{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-bottom: 36rpx;
      .environ{
        width: 32%;
        height: 200rpx;
        margin-right: 1%;
        margin-bottom: 1%;
        border-radius: 12rpx;
        overflow: hidden;
      }
      .environ:nth-child(1):nth-last-child(2),
      .environ:nth-child(2):nth-last-child(1),
      .environ:nth-child(1):nth-last-child(3),
      .environ:nth-child(2):nth-last-child(2),
      .environ:nth-child(3):nth-last-child(1) {
          width: 32%;
      }
      
      .environ:nth-child(1):nth-last-child(4),
      .environ:nth-child(2):nth-last-child(3),
      .environ:nth-child(3):nth-last-child(2),
      .environ:nth-child(4):nth-last-child(1) {
          width: 49%;
          height: 300rpx;
      }
    }
    .content{
      font-weight: 400;
      font-size: 30rpx;
      color: #2B2B2B;
      padding-bottom: 24rpx;
      :deep(.uv-read-more__toggle){
        justify-content: flex-start;
        margin-top: 24rpx;
      }
    }
    .carry{
      font-weight: 400;
      font-size: 30rpx;
      color: #737373;
      padding: 10rpx 0;
      margin-bottom: 20rpx;
      .title{
        padding-bottom: 10rpx;
      }
    }
    .hd{
      width: 100%;
      padding-bottom: 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        align-items: center;
        .fo{
          padding-left: 20rpx;
          .time{
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
          }
          .name{
            font-weight: 500;
            font-size: 32rpx;
            color: #2B2B2B;
          }
        }
        .avatar{
          width: 70rpx;
          height: 70rpx;
          position: relative;
          .img{
            border-radius: 50%;
            overflow: hidden;
          }
        }
      }
    }
  }
</style>